<template>
  <div>
    <div id="mine">  
      <van-nav-bar title="京东注册" font-size-xs:20px @click-left="onClickLeft" @click-right="onClickRight">
          <template #left>
              <van-icon name="arrow-left" size="18" color="black" />Back
          </template>
          <template #right>
              <van-icon name="arrow-right" size="18" color="black" /> 去登录
          </template>
       </van-nav-bar>
   </div>
<!-- 头像 -->
    <van-image round width="80px" height="80px" :style="bacimages" />
    <van-image round width="80px" height="80px" :style="bacimages" />
<!-- 表单 -->
      <div> 
          <van-form ref="form" validate-first show-error>
                <van-field v-model="form.username" name="username" placeholder="用户名" :style="{border:border1}" clearable
                  :rules="[
                    { 
                        required: true,
                        message: '空用户名' ,
                        trigger:'onBlur', 
                    }]"/>
                <van-field v-model="form.phone" name="phone" placeholder="手机号" :style="{border:border2}"  clearable show-error
                  :rules="[
                    { 
                        required: true,
                        trigger:'onBlur', 
                        message: '空手机号' 
                    },{
                        pattern:/^[1][3-8]\d{9}$/,
                        message:'手机号不正确'
                    }]"/>

                <van-field v-model="form.lpwd" type="password" name="pwd" placeholder="密码" :style="{border:border3}" clearable show-error
                  :rules="[
                    { 
                        required: true,
                        trigger:'onBlur', 
                        message: '空密码' 
                    },{
                        pattern:/^\d{6}$/,
                        message:'请输入六位数密码'
                    }]"/>
 
                <van-field v-model="lpwd2" type="password" name="pwd2" placeholder="确认密码"  :style="{border:border4}" clearable show-error
                  :rules="[
                            { 
                              required: true,
                              trigger:'onBlur', 
                              message: '空确认' 
                            },{
                              validator:value=>{
                                return this.form.lpwd===value},
                                message:'输入不一致',
                                trigger:'onBlur'
                              }]"/>
                <div class="mycode">
                    <van-field v-model="form.code" type="text" name="code" placeholder="验证码"  :style="{border:border5}" clearable show-error
                      :rules="[
                       { 
                              required: true,
                              trigger:'onBlur', 
                              message: '验证码空' 
                        },
                      { 
                        required: true,
                        trigger:'onChange', 
                        message: '验证码空' 
                      }]"/> 
                    <van-button style="font-size:16px;width:30vw;color:#fff" round block  @click="getcode">{{codeb}}</van-button>
                </div>
                  
                  <div>
                    <van-button style="font-size:20px;" 
                                color="linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba)"  
                                round block type="info" @click="submit">
                                注&nbsp;册
                    </van-button>
                  </div> 
            </van-form>
      </div>   
  </div>
</template>

<script>
import {Get,Post} from '../gp.js'

export default {
 data(){
    return{
      bacimages:{
        backgroundImage: "url(http://47.98.224.84:3000/avatar/1.png)",
      },
      form:{
        avatar:'',
        username:'',
        phone:'',
        lpwd:'',
        code:'',
      },
      codeb:'获取验证码',
      lpwd2:'',
      border1:"",
      border2:"",
      border3:"",
      border4:"",
      border5:"",
      ava:''
    }
  },
  mounted(){
    this.ava=Math.floor(Math.random()*(8-1)+1);
    this.bacimages.backgroundImage=`url(http://47.98.224.84:3000/avatar/${this.ava}.png)`;
    // this.bacimages.backgroundImage=`url(http://127.0.0.1:3000/avatar/${this.ava}.png)`;
  },
  methods:{
    onClickLeft(){
      this.$router.push('/home');
    },
    onClickRight(){
      this.$router.push('/login');
    },
    // 吐司弹窗
    toToast(txt) {
        this.$toast({
          message: txt,
          position: 'bottom'
        })
     },
    // 验证倒计时
    outTime(time) {
        if (time==0) {
            this.codeb = '获取验证码';
          }
          let timer = setInterval(()=>{
            this.codeb=time+'s';
            time--;
            if(time<0){
              this.codeb='获取验证码';
              clearInterval(timer)
            }
          },1000)
          return true;
        },
   //先验证二次密码 获取验证码
    getcode(){
      this.form.code="已发送"
        // 获取验证码
        let reg1 = /^[1][3-8]\d{9}$/;
        if(this.form.phone && reg1.test(this.form.phone) && this.form.lpwd && this.lpwd2 && (this.form.lpwd==this.lpwd2)){
          this.outTime(10);
          if(this.outTime(10)){
              let url="/user/getcode";
              let data={};
                Post(url,data).then((res)=>{
                  console.log(res);
                  setTimeout(()=>{
                    this.toToast(`验证码为:${res.data.data}`);
                    this.form.code=res.data.data;
                    console.log("已获取验证码");
                  },3000)  
                  return true;                      
                })
            }
        }else{
          this.toToast(`未知错误`);
          return false;
        }
    },
    submit(){
      let checkusername;
      let checkphone;
      let checkcode;
      if(this.form.username){
        let url='/user/un';
        let data={};
        data.username=this.form.username;
        Post(url,data).then((res)=>{
          console.log(res);
          let un=res.data.code;
          if(un==201){
            this.toToast(`用户名已被占用`);
            this.border1="1px solid red";
          }else{
              this.border1="1px solid green";
              console.log("用户名可用")
              if(this.form.phone){
                let url='/user/up';
                let data={};
                data.phone=this.form.phone;
                Post(url,data).then((res)=>{
                  console.log(res);
                  let up=res.data.code;
                  if(up==201){
                    this.toToast(`手机号已注册`);
                    this.border2="1px solid red";
                  }else{
                    this.border2="1px solid green";
                    console.log("手机号可用")
                      let url='/user/register';
                      let data={};
                      data=this.form;
                      console.log('注册中。。。');
                      console.log(`url:${url},data:${data}`);
                      Post(url,data).then((res)=>{
                        console.log(`收到返回数据：${res}`)
                        this.$router.push('/login')
                      })
                  }
                });
              };              
          };
        });
      };
    }
  }}
</script>



<style scoped>

#mine /deep/ .van-nav-bar__title{
  /* color: white !important; */
  font-size: 18px;
};
.dl{
  position: relative;
}
p{ 
  margin-top: 46px;
  display: inline-flex;
  position: absolute;
  left:5vw;
  top:5vh;
  font-size: 25px;
  width: 15vw;
}
::v-deep .van-image{
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
  border-radius: 50%; 
  border:1px solid rgb(175, 175, 170);
  box-shadow: 1px 1px 2px #ccc,-1px 1px 2px #ccc;
}
::v-deep .van-image__img{
   width: 0;
}
::v-deep .van-image__loading{
  background-color: rgba(0,0,0,0);
  }
::v-deep .van-icon-photo::before{
  content:'';
}
 ::v-deep .van-nav-bar__right{
   width: 50px;
   line-height:0;
}
/* 注册表单 */
.van-form{
  height: 60vh;
  width: 100%;
  /* background-color: pink; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.van-field , .van-button{
  width:85%; 
  margin: 0 auto;
  padding: 0 auto;
  height: 7vh; 
  border:1px solid rgb(175, 175, 170);
  border-radius: 40px;
}
::v-deep .van-field__error-message{
  position: absolute;
  top: 0;
}
.van-form :nth-child(5){
  width: 85%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.van-form :nth-child(5) > div{
  width: 60%;
}
::v-deep .van-cell__value {
  overflow: visible;
}
::v-deep .van-button{
  border:0;
  background-image: linear-gradient(90deg,#fab3b3,#ffbcb3 73%,#ffcaba);
}

::v-deep .van-field__control{
  height: 22px;
  font-size: 16px;
  background-color: none;
  margin:0 auto;
  text-align: center;
}
::v-deep input:-internal-autofill-selected {
  background-color: none;
}

/* 登录按钮 */
.van-button{
  width: 85vw; 
  height: 7vh;   
  /* border:1px solid rgb(175, 172, 170); */
  border-radius: 40px;
}

.bodyer span{
  color: rgb(220, 213, 204);
  width: 40%;
  position: absolute;
  top: 55vh;
  left:30%;

}
.tu {
  width: 100%;
  position: absolute;
  top:65vh;
  left:1%;
}
.footer{
  text-align: center;
      font-family: 微软雅黑,'Heiti SC',黑体,Arial;
}
.footer p{
  width: 54%;
  display: block;
  color: rgb(168, 166, 162);
  position: absolute;
  top:80vh;
  left:23%;
  margin:0;
  padding: 0;
}
.footer a{ 
  width: 54%;
  display: block;
  position: absolute;
  top:5vh;
  left: 10vw;
  margin-top: 2px;
  color: rgb(4, 73, 163);
}
</style>